<template>
	<div>
		<!-- 顶部选项卡 -->
		<scroll-view class="pagecontrol-top-scroll" scroll-x="true" scroll-with-animation :scroll-into-view="scrollInto">
		    <view class="pagecontrol-top-title">
		        <view v-for="(items, index) in itemsArr" :key="index" class="pagecontrol-top-text" @click="changeTab(index)" :id="'tab' + index">
		            <view :class="tabIndex === index ? 'pagecontrol-top-selected' : 'pagecontrol-top-normal'">{{ items }}</view>
		            <view class="pagecontrol-bottom-line" :class="tabIndex === index ? 'pagecontrol-bottom-line-show' : 'pagecontrol-bottom-line-visibility'"></view>
		        </view>
		    </view>
		</scroll-view>
		<!-- 内容 -->
		<swiper :duration="150" :current="tabIndex" @change="onChangeTab" :style="'height:' + scrollH + 'px;'">
		    <swiper-item v-for="(item, index) in itemsArr" :key="index">
		        <scroll-view scroll-y="true" show :style="'height:' + scrollH + 'px;'" >
					<view v-if="index==0" style="padding-bottom: 100px;">
					    <!--应收-->
						<view class="source" v-for="item in 2">
							<view style="display: flex;width: 100%;margin-bottom: 20px;">
								<view style="flex: 1;display: flex;flex-direction: column;">
									<span>
										<text>Y3334455</text>
										<text>已签收</text>
									</span>
									<text>娃哈哈食品有限公司</text>
									<text>交易金额（元）8000</text>
									<text>实收总额（元）2000</text>
								</view>
								<view style="flex: 1;display: flex;flex-direction: column;">
									<text style="font-size: 12px;">创建时间:2023-01-01 18:00:00</text>
									<span>
										<text>承运商</text>
										<text style="margin-left: 5px;">月结15天</text>
										<text style="margin-left: 5px;">未结清</text>
									</span>
									<text>应收总额（元）7000</text>
									<text>应收余额（元）5000</text>
								</view>
							</view>
							<view style="display: flex;position: absolute;right: 10px;bottom: 10px;">
								<view hover-class="buttonHover" style="width: 40px;text-align: center;border: 1rpx solid #bf5f09;color:#bf5f09;border-radius: 8px;font-size: 12px;">收款</view>
								<view hover-class="buttonHover" style="margin-left: 20px;width: 40px;text-align: center;border: 1rpx solid #bf5f09;color:#bf5f09;border-radius: 8px;font-size: 12px;">结清</view>
							</view>
							
						</view>
					</view>
					<view v-else-if="index==1" style="padding-bottom: 100px;">
					    <!--应付-->
						<view class="source" v-for="item in 3">
							<view style="display: flex;width: 100%;margin-bottom: 20px;">
								<view style="flex: 1;display: flex;flex-direction: column;">
									<span>
										<text>Y3334455</text>
										<text>已签收</text>
									</span>
									<text>娃哈哈食品有限公司</text>
									<text>交易金额（元）8000</text>
									<text>实收总额（元）2000</text>
								</view>
								<view style="flex: 1;display: flex;flex-direction: column;">
									<text style="font-size: 12px;">创建时间:2023-01-01 18:00:00</text>
									<span>
										<text>承运商</text>
										<text style="margin-left: 5px;">月结15天</text>
										<text style="margin-left: 5px;">未结清</text>
									</span>
									<text>应收总额（元）7000</text>
									<text>应收余额（元）5000</text>
								</view>
							</view>
							<view style="display: flex;position: absolute;right: 10px;bottom: 10px;">
								<view hover-class="buttonHover" style="width: 40px;text-align: center;border: 1rpx solid #bf5f09;color:#bf5f09;border-radius: 8px;font-size: 12px;">撤销</view>
								<view hover-class="buttonHover" style="margin-left: 20px;width: 60px;text-align: center;border: 1rpx solid #bf5f09;color:#bf5f09;border-radius: 8px;font-size: 12px;">付款申请</view>
								<view hover-class="buttonHover" style="margin-left: 20px;width: 40px;text-align: center;border: 1rpx solid #bf5f09;color:#bf5f09;border-radius: 8px;font-size: 12px;">结清</view>
							</view>
							
						</view>
					</view>
		        </scroll-view>
		    </swiper-item>
		</swiper>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				itemsArr: ['应收','应付'],
				 tabIndex: 0,
				 scrollH: 700,
				 scrollInto: '',
			}
		},
		onLoad(e) {
		    uni.getSystemInfo({
		        success: res => {
		            this.scrollH = res.windowHeight-40;
		        }
		    });
		},
		methods: {
			// 切换选项
			changeTab(index) {
			    if (this.tabIndex === index) {
			        return;
			    }
			    this.tabIndex = index;
			    // 滚动到指定元素
			    this.scrollInto = 'tab' + index;
			},
			// 监听滑动
			onChangeTab(e) {
				uni.showLoading({
					title:'正在加载',
				})
				setTimeout(function() {
					uni.hideLoading()
				}, 500);
			    this.changeTab(e.detail.current);
			},
		},
	}
</script>

<style scoped>
.pagecontrol-top-scroll {
    height: 40px;
    width: 100%;
    white-space: nowrap;
    box-sizing: border-box;
    border-bottom: 1rpx solid #ededed;
	background-color: #f8f8f8;
}

.pagecontrol-top-title {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-around;
}

.pagecontrol-top-text {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.pagecontrol-top-normal {
    color: #656565;
    font-size: 16px;
}

.pagecontrol-top-selected {
    color: #000000;
    font-weight: bold;
    font-size: 16px;
}

.pagecontrol-bottom-line {
    width: 50vw;
    height: 3px;
    margin-top: 8px;
    background-color: #bf5f09;
	border-radius: 11px;
}

.pagecontrol-bottom-line-show {
    visibility: visible;
}

.pagecontrol-bottom-line-visibility {
    visibility: hidden;
}
.source{
	height: 120px;
	padding: 10px;
	display: flex;
	flex-direction: row;
	align-items: center;
	border-bottom: 1px solid #ededed;
	background-color: #ffffff;
	position: relative;
}
.buttonHover{
	opacity: 0.6;
}
</style>